// define the namespace

// tag conversor
syslib.ui.TooltipTag = __class(syslib.ui.TagConversor, {
	component : null,
	
	execute : function(){
		// create the component
		var component = new syslib.ui.Tooltip(this.__attributes.controller, this.__attributes);
		
		// append
		component.enable();
		
		// store the component
		this.component = component;
	},

	getComponent : function(){
		return this.component;
	}
});

// component definition
syslib.ui.Tooltip = __class(syslib.ui.UIComponent, {
	DIRECTION_LEFT : 0, 
	DIRECTION_RIGHT : 1, 
	
	__options : {}, 
	
	controller : null,
	isMouseOver : false, 
	
	__construct : function(controller, options){
		// set the options
		this.__options = __extend({ 
			direction : this.DIRECTION_RIGHT, 
			page : null,
			delay : 0.5, 
			style : "",
			innerHTML : "" 
		}, options);
		
		// set the attributes default values
		this.controller = controller;
		this.isMouseOver = false;
		
		// load the style
		syslib.loadStyleForComponent("tooltip");
	},

	__createElement : function(){
		// create the dom object attributes
		var tooltipAttributes = {
			"class" : "syslib-tooltip-main syslib-text", 
			"style" : this.__options.style
		};
		
		// create the json structure
		var elemtJSON = ["div", tooltipAttributes, this.__options.innerHTML];

		// create the element
		var tooltip		= syslib.element.createFromJSON(false, elemtJSON);
		var element		= tooltip.element;
		var references	= tooltip.references;
		
		// store the element
		this.__element = element;
		
		// retorna
		return element;
	},
	
	appendChild : function(child){
		this.getElement().appendChild(child);
	},
	
	enable : function(){
		// check if the controller is valid
		if(!__valid(__id(this.controller))){
			// invalid controller, shows an error and return
			syslib.messages.error("syslib.ui.Tooltip.onEnterBody(): Invalid controller for tag tooltip");
			return false;
		}
		
		// get the tooltip
		var tooltip = this.getElement();
		
		// hide the element
		__hide(tooltip);
		
		// get the controller dom object
		var controller = __id(this.controller);
		
		// append the tooltip to the body
		document.body.appendChild(this.getElement());
		
		// set the events
		syslib.event.listen('mouseover', controller, function(evt){
			// set the mouse status
			this.isMouseOver = true;
			
			// set an interval to show the tooltip
			setTimeout(this.showTooltip.applyTo(this), (this.delay * 1000));
		}.applyTo(this));
		
		syslib.event.listen('mousemove', controller, function(evt){
			// set the position
			this.setPosition(evt);
		}.applyTo(this));
		
		syslib.event.listen('mouseout', controller, function(evt){
			// set the mouse status
			this.isMouseOver = false;
			
			// hide the element
			syslib.element.hide(this.getElement());
		}.applyTo(this));
		
		syslib.event.listen('click', controller, function(evt){
			// set the mouse status
			this.isMouseOver = false;
			
			// hide the element
			syslib.element.hide(this.getElement());
		}.applyTo(this));
		
		// return
		return true;
	}, 
	
	showTooltip : function(){
		// check if the mouse if over the container
		if(!this.isMouseOver){
			return false;
		}
		
		// check if this is an ajax tooltip
		if(this.page != null){
			new syslib.ajax.request(this.page, {
				destiny: this.getElement(),
				store: false
			});
		}
		
		// show the tooltip
		__show(this.getElement());
	}, 
	
	setPosition : function(evt){
		// check if the mouse is over
		if(!this.isMouseOver){
			return false;
		}
		
		// get some needed information
		var controller 	= __id(this.controller);
		var mouseX		= syslib.event.mouseX(evt);
		var mouseY		= syslib.event.mouseY(evt);
		var left		= 0;
		
		// get the left position
		if(this.direction == this.DIRECTION_LEFT){
			var tooltipSize		= syslib.ui.size.getOffsets(this.getElement());
			var controllerSize	= syslib.ui.size.getOffsets(controller);
			
			left = mouseX - tooltipSize.width + controllerSize.width;
		} else {
			left = mouseX;
		}
		
		// update the element style
		syslib.element.updateStyle(this.getElement(), {
			"position" : "absolute",
			"margin" : 0,
			"top" : (mouseY + 25) +"px",
			"left" : left + "px"
		});
	}
});